<template>
    <div class="login-box">
        <div class="form">
            <div class="title">
                <h3>千锋后台管理</h3>
            </div>
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="用户名" prop="name">
                    <el-input type="text" v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input type="password" v-model="ruleForm.pwd"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')"
                        >登录</el-button
                    >
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { loginApi } from "@/http/http";
import { setCookie } from "@/utils/cookie";

export default {
    name: 'login',
    data() {
        return {
            ruleForm: {
                name: '',
                pwd: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],

            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                // console.log('22222', this.ruleForm);

                if (valid) {
                    loginApi(this.ruleForm).then((res) => {
                        // console.log(333, res);
                        if (res.code === 200) {
                            
                            setCookie('token', res.data.token)

                            localStorage.setItem('role', res.data.role)
                            this.$message({
                                message: '登陆成功',
                                type: 'success'
                            });

                            setTimeout(() => {
                                this.$router.push('/')
                            }, 1000);

                        } else {
                            this.$message.error('账号或者密码错误');
                            // 重置
                            this.resetForm('ruleForm')
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="less" scoped>
.login-box {
    width: 100%;
    height: 100%;
    position: fixed;
    background: url("../assets/bg9.jpg") no-repeat center;
    background-size: cover;

    .form {
        width: 400px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        .title {
            text-align: center;
            line-height: 30px;
        }
    }
}
</style>